<template>
	<view class="common">
		<view class="title">
			{{info.item.caName}}
		</view>
		<view class="time">
			{{info.item.creationTime}}
		</view>
		<u-gap height="2" bg-color="#C49266"></u-gap>
		<!-- 详情 -->
		<view class="detile" :style="{backgroundImage:bgImg}">
			<image v-if="showPage" :src="bgImg" mode="widthFix" style="width: 100%;"></image>
			<view class="center">
				<view class="text">
					品牌:{{getType()}}
				</view>
				<view class="text">
					产品:{{info.item.caColour}}
				</view>
				<view class="text">
					零售价:{{info.item.caMoney}}
				</view>
				
				<u-image width="100%" mode="widthFix" :src="src"></u-image>
				
			</view>

		</view>
	</view>
</template>

<script>
	import {
		url
	} from "@/common/index.js"
	import {
		getBg
	} from "@/common/api.js"
	export default {
		data() {
			return {
				info: {},
				showPage: false,
				src: "",
				bgImg: ""
			}
		},
		onLoad(data) {
			data.item = JSON.parse(data?.item || "{}")
			this.info = data
			this.src = url + data.item.caDetail
			this.showPage = true
		},
		created() {
			uni.setNavigationBarTitle({
				title: this.info.type == 1 ? "案例中心" : ""
			});
			this.getBg()


		},
		methods: {
			async getBg() {
				let data = await getBg(129)
				this.bgImg = url + data.rows[0].baUrl
			},
			getType() {

			}
		}
	}
</script>

<style>
	page {
		background-color: #222;
	}

	image {
		width: 100%;
	}

	.common {
		padding: 30rpx;
		color: #C49266;
	}

	.title {
		padding: 15rpx 0;
		font-size: 32rpx;
	}

	.time {
		padding: 15rpx 0;
		font-size: 30rpx;
	}

	.text {
		color: #C49266;
		padding: 12rpx 0;
		font-size: 30rpx;
	}

	.detile {
		width: 100%;
		position: relative;
		margin-top: 30rpx;

	}

	.center {
		width: 100%;
		position: absolute;
		top: 0;
		padding: 0 20rpx;
	}

	.logo {
		width: 100%;
		height: 160rpx;
		text-align: center;
		line-height: 160rpx;
		font-size: 40rpx;
	}

	.al {
		font-size: 30rpx;
		padding: 15rpx 0;
	}
</style>